<template>
  <!-- <div class="official-item"> -->
  <ul class="right-song mleft-30">
    <li
      v-for="(iten, index) in tracks"
      :key="iten.id"
      :class="{ 'first-three': index }"
    >
      <span class="mleft-10">
        {{ index + 1 }}
      </span>
      <span class="mleft-10 text-hidden">{{ iten.name }}</span>
      <div class="mright-10 end">
        <span v-for="(_, index) in iten.ar" :key="_.id">
          {{ index === iten.ar.length - 1 ? _.name : `${_.name} / ` }}
        </span>
      </div>
    </li>
  </ul>
  <!-- </div> -->
</template>

<script>
export default {
  name: 'officialItem',

  props: {
    tracks: {
      type: Array,
      default() {
        return [];
      }
    }
  },

  data() {
    return {
      
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style lang="less" scoped>
.right-song {
  flex: 1;
  li {
    height: 32px;
    line-height: 32px;
    &:nth-child(3) {
      background-color: #efefef;
    }
    &:hover {
      background-color: #f4f4f4;
    }
    .end {
      float: right;
      color: #9b9b9b;
    }
  }
  .first-three {
    color: red;
  }
}
</style>